
<template>
  <div class="grade1 base-background-img">
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img style="width:260px;height:51px;" :src="item.img" alt="">
      </li>
    </ul>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'grade1',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        tabs: [{
          img: 'static/robot/1/1.png',
          url: 'static/robot/pdf/1/【课程讲义】——数字123.pdf',
          data: [{
            isSelected: 1,
            name: '数字123—《数字手指谣》.mp4',
            url: STATICPATH + '/robot/1/大颗粒/shuzi123.mp4'
          }]
        },
        {
          img: 'static/robot/1/2.png',
          url: 'static/robot/pdf/1/【课程讲义】——小鱼儿.pdf',
          data: [{
            isSelected: 1,
            name: '小鱼儿—《三条鱼》.mp4',
            url: STATICPATH + '/robot/1/大颗粒/santiaoyu.mp4'
          }]
        },
        {
          img: 'static/robot/1/3.png',
          url: 'static/robot/pdf/1/【课程讲义】——结实的墙.pdf',
          data: [{
            isSelected: 1,
            name: '结实的墙—《长城谣》.mp4',
            url: STATICPATH + '/robot/1/大颗粒/changchengyao.mp4'
          }]
        },
        {
          img: 'static/robot/1/4.png',
          url: 'static/robot/pdf/1/【课程讲义】——缤纷手绘画.pdf',
          data: [{
            isSelected: 1,
            name: '缤纷手绘画—《转一转》.mp4',
            url: STATICPATH + '/robot/1/太空沙/zhuanyizhuan.mp4'
          }]
        },
        {
          img: 'static/robot/1/5.png',
          url: 'static/robot/pdf/1/【课程讲义】——光与影（1）.pdf',
          data: []
        },
        {
          img: 'static/robot/1/6.png',
          url: 'static/robot/pdf/1/【课程讲义】——光与影（2）.pdf',
          data: []
        },
        {
          img: 'static/robot/1/7.png',
          url: 'static/robot/pdf/1/【课程讲义】——苹果小实验.pdf',
          data: [{
            isSelected: 1,
            name: '《拍手跺脚真快乐》',
            url: STATICPATH + '/robot/1/纸粘土/zhenkuaile.mp4'
          }]
        },
        {
          img: 'static/robot/1/8.png',
          url: 'static/robot/pdf/1/【课程讲义】——小虫子.pdf',
          data: [{
            isSelected: 1,
            name: '小虫子—《手指动一动》',
            url: STATICPATH + '/robot/1/纸粘土/dongyidong.mp4'
          }]
        },
        {
          img: 'static/robot/1/9.png',
          url: 'static/robot/pdf/1/【课程讲义】——美丽蝴蝶.pdf',
          data: [{
            isSelected: 1,
            name: '美丽蝴蝶—《美丽的花》',
            url: STATICPATH + '/robot/1/纸粘土/meilidehua.mp4'
          }]
        },
        {
          img: 'static/robot/1/10.png',
          url: 'static/robot/pdf/1/【课程讲义】——小小苹果树.pdf',
          data: [{
            isSelected: 1,
            name: '小小苹果树—Apple tree',
            url: STATICPATH + '/robot/1/纸卡/apple tree.mp4'
          }]
        },
        {
          img: 'static/robot/1/11.png',
          url: 'static/robot/pdf/1/【课程讲义】——创意小宇宙1.pdf',
          data: [{
            isSelected: 1,
            name: '创意小宇宙1—《小星星》',
            url: STATICPATH + '/robot/1/大颗粒/xiaoxingxing.mp4'
          }]
        },
        {
          img: 'static/robot/1/12.png',
          url: 'static/robot/pdf/1/【课程讲义】——创意小宇宙2.pdf',
          data: [{
            isSelected: 1,
            name: '创意小宇宙2—《菊花开》',
            url: STATICPATH + '/robot/1/纸粘土/juhuakai.mp4'
          }]
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.grade1 > div {
  position: absolute; 
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 230px;
  left: 190px;
  width: 910px;
  height: 480px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 20px;
  position: initial;
}
</style>
